<template>
    <div class="service-cards">
        <div class="container">
            <div class="cards-wrapper">
                <div class="card">
                    <div class="icon-wrapper">
                        <img src="../images/car-rental.png" alt="汽车租赁" />
                    </div>
                    <div class="card-content">
                        <h3>汽车租赁</h3>
                        <p>高端车型</p>
                        <p>商务车型</p>
                        <p>经济车型</p>
                    </div>
                </div>
                <div class="card">
                    <div class="icon-wrapper">
                        <img src="../images/network-car.png" alt="网约车" />
                    </div>
                    <div class="card-content">
                        <h3>网约车</h3>
                        <p>开通城市</p>
                        <p>服务热线</p>
                        <p>合伙人招募</p>
                    </div>
                </div>
                <div class="card">
                    <div class="icon-wrapper">
                        <img src="../images/car-finance.png" alt="车辆金融" />
                    </div>
                    <div class="card-content">
                        <h3>车辆金融</h3>
                        <p>利率低</p>
                        <p>审核快</p>
                        <p>快速上线</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.service-cards {
    padding: 40px 0;
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.cards-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.card {
    flex: 1;
    background-color: #ff8c00;
    padding: 30px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper img {
    width: 50px;
    height: 50px;
}

.card-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.card-content p {
    font-size: 16px;
    margin-bottom: 8px;
}

.card-content p:last-child {
    margin-bottom: 0;
}
</style>